<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    .red {
      color: red
    }

    body {
      height: 3000px;
    }
  </style>
</head>

<body>
  <div id="app">
    <p v-once>{{message}}</p>
    <p>{{message}}</p>
    <ul>
      <li v-for="(item, index) in movies" :key="item">{{item}}</li>
    </ul>
    <div>
      <p v-for="(item, index) in obj" :key="item">{{item}}</p>
    </div>
    <h2>当前计数{{counter}}</h2>
    <button @click="counter++">+</button>
    <button @click="counter--">-</button>
    <button @click="handleAdd">+</button>
    <button v-on:click="handleSub">-</button>
    <h2>{{link}}+46546{{link}}</h2>
    <p>{{span}}</p>
    <h2 v-html="link"></h2>
    <h2 v-text="span">{{165456}}</h2>
    <h3 v-bind:title="mytitle">bind使用</h3>
    <h3 :title="mytitle">bind使用</h3>
    <a :href="link">百度</a>
    <!-- <img :src="imgSrc" alt=""> -->
    <h3 :class="active">我是h3</h3> active是变量
    <!-- <h3 :class="{类名：isActive,类名1：boolean}"></h3>  类名在style样式中定义。isActive是变量。在data中定义-->
    <h3 :class="{red:isActive}" class="demo">我是h3</h3>
    <h3 :class="classObj"></h3>
    <button @click="changeColor">changeColor</button>
    <h4 :class="{red:isActive}">aaa</h4>
    <!-- :style="{属性名1:变量1,属性名2:变量2}" -->
    <div :style="{fontSize:fontSize+'px',color:green,backgroundColor:'pink'}">动态绑定style</div>
    <h3>{{firstName+lastName}}</h3>
    <h4>{{firstName}}{{lastName}}</h4>
    <!-- <h3>{{getFullName()}}</h3> -->
    <!-- 计算属性调用不需要加() 结果是函数调用返回值-->
    <h3>{{FullName}}</h3>
    <h3>总价格:{{books[0].price+books[1].price+books[2].price+books[3].price}}</h3>
    <h3>总价格:{{totalPrice}}</h3>

    <button @click="fn">button1</button>
    <!-- 基本数据类型vue不会解析成变量 如数字100  string'abc' -->
    <button @click="fn1(123,$event)">button2</button>

    <h3>{{getTotalPrice()}}</h3>
    <div @click="divClick">
      <a @click.stop.prevent="aClick" :href="url">baidu</a>
      <!-- <a href=""></a> -->

    </div>
    <button @click.once="submit">只能点击一次</button>
    <input type="text" @keyup.enter="submit">
    <input type="text" @keyup.enter="submit">
    <input @keyup="submit">
    <input type="text" @keyup.enter="func">
    <p v-if="score<60">不及格</p>
    <p v-else-if="score<80">良好</p>
    <p v-else>优秀</p>
    <!-- v-else v-else-if必须紧跟在v-if之后 -->
    <p>{{result}}</p>

    <h3 v-if="true">123if</h3>
    <h3 v-show="isActive">123show</h3>
    <h4>我是下面的文笔</h4>
    <span v-if="isActive">
      <label>用户账号<input type="text" placeholder="用户账号" name="username" value="13"></label>
    </span>
    <span v-else>
      <label>用户密码<input type="text" placeholder="用户密码" name="pwd"></label>
    </span>
    <button @click="changeState">切换</button>
    <div v-if="isActive">vif</div>
    <div v-show="isActive">vshow</div>
    <div>415465</div>
  </div>

  <script>
    const app = new Vue({
      el: "#app",
      data: {
        firstName: '李',
        lastName: '光明',
        message: "hello zs",
        link: '<a href="http://www.baidu.com">baidu</a>',
        url: "http://www.baid.com",
        span: ' <span>我是span标签</span>4646',
        mytitle: '这是我定义的title',
        active: 'red',
        isActive: false,
        green: "green",
        fontSize: 40,
        score: 30,
        // 遍历数组
        movies: ['星级大战', '大话西游', '少年派', '盗梦空间'],
        // 遍历对象
        obj: {
          title: 'How to do lists in Vue',
          author: 'Jane Doe',
          publishedAt: '2016-04-10'
        },
        books: [
          { id: 100, name: '红楼梦', price: 100 },
          { id: 101, name: '西游记', price: 150 },
          { id: 102, name: '三国', price: 160 },
          { id: 103, name: '水浒传', price: 180 },
        ],
        classObj: {
          red: this.isActive
        },
        counter: 0

      },
      methods: {
        handleAdd() {
          console.log(this)
          this.counter++
        },
        handleSub() {
          this.counter--
        },
        changeColor() {
          this.isActive = !this.isActive
        },
        getTotalPrice() {
          return this.books.reduce((prev, next) => next.price + prev, 0)
        },
        // 函数调用@click="fn"
        fn(event) {
          console.log(event)
        },
        fn1(value, event) {
          console.log(value, event)
        },
        divClick() {
          console.log('div')
        },
        aClick() {
          console.log('p')
        },
        submit() {
          console.log('aaaaw')
        },
        func() {
          console.log('aaa')
        },
        changeState() {
          this.isActive = !this.isActive
        },
        



      },
      // 计算属性，以属性名字起函数名。n名词
      computed: {
        FullName() {
          return this.firstName + '' + this.lastName
        },
        totalPrice() {
          return this.books.reduce((prev, next) => next.price + prev, 0)
        },
        result() {
          let message = ''
          if (this.score < 60) {
            return message = '不及格'
          }
          if (this.score < 80) {
            return message = '良好'
          }
          else {
            return message = '优秀'
          }
        }

      },
    })
  </script>
</body>
<!-- 
{{varies}}里面放的是变量
所有指令='varies' v-html='变量'

 -->

</html>